<template>
    <span
        class="title-sort-wrapper"
        @click="handleToggleSort">
        <span class="title">{{ title }}</span>
        <span class="sort">
            <el-icon
                name="caret-top"
                :class="{'active': active == 'asc'}"
                @click.native.stop="handleSelect('asc')" />
            <el-icon
                name="caret-bottom"
                :class="{'active': active == 'desc'}"
                @click.native.stop="handleSelect('desc')" />
        </span>
    </span>
</template>

<script>
export default {
    name: 'TableTitleWithSort',
    props: {
        title: {
            required: true,
            type: String
        }
    },
    data() {
        return {
            active: ''
        };
    },
    methods: {
        handleToggleSort() {
            if (this.active == 'asc') {
                this.active = 'desc';
            } else if (this.active == 'desc') {
                this.active = 'asc';
            } else {
                this.active = 'desc';
            }
            this.$emit('sort', this.active, this);
        },
        handleSelect(val) {
            this.active = val;
            this.$emit('sort', val, this);
        }
    }
};
</script>


<style lang="less" scoped>
.title-sort-wrapper {
    cursor: pointer;
    user-select: none;
}
.title {
    font-weight: bold;
}
.sort {
    position: relative;
    width: 12px;
    height: 100%;
    margin-left: 5px;
}
.el-icon-caret-top {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #bfbfbf;

    &.active {
        color: #20a0ff;
    }
}
.el-icon-caret-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 12px;
    color: #bfbfbf;

    &.active {
        color: #20a0ff;
    }
}
</style>
